<script setup lang="ts">
interface CloudData {
  iconClass: string;
  comment: string;
}
const cloudContents: CloudData[] = [
  {
    iconClass: 'icon-a-gongyouyun5',
    comment: '丰富的公有云资源',
  },
  {
    iconClass: 'icon-kuaisugongzuoliu',
    comment: '24H快速开通',
  },
  {
    iconClass: 'icon-youhuiquan',
    comment: '自有线路性价比高',
  },
  {
    iconClass: 'icon-kefunv',
    comment: '7*24h 双语响应',
  },
];
</script>

<template>
  <div class="cloud-advantage">
    <div class="container">
      <div class="advantageBody">
        <div class="content" v-for="item in cloudContents" :key="item.comment">
          <i :class="`iconfont ${item.iconClass}`"></i>
          <span class="text">{{ item.comment }}</span>
        </div>
      </div>
    </div>
    <img
      src="@/assets/images/global/design/rectangle_1.png"
      alt=""
      style="width: 100%"
    />
  </div>
</template>

<style lang="scss" scoped>
.cloud-advantage {
  width: 100%;
  background-color: #eff3f5;
  .container {
    padding: 200px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .advantageBody {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .content {
        width: 255px;
        height: 243px;
        background-image: url('@/assets/images/cloud/design/cloud_icon_1.png');
        background-size: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

        .iconfont {
          font-size: 60px;
        }
        .text {
          margin-top: 10px;
          font-family: 'SourceHanSansCN-Light';
          font-size: 20px;
        }
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
  }
}

// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 100%;
  }
}

// 0px 至xl(992px)
@media screen and (max-width: 992px) {
  .container {
    padding: 100px 0 !important;
    .advantageBody {
      flex-wrap: wrap;
      .content {
        margin: 20px 0;
      }
    }
  }
}
</style>
